<template>
  <div class="top" ref="top">
    <el-form class="search">
      <el-form-item>
        <el-select
          v-model="department"
          clearable
          placeholder="请选择科室"
          @change="depchanges"
        >
          <el-option
            v-for="item in departmentlist"
            :key="item.id"
            :label="item.departmentName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="doctor" clearable placeholder="请选择医生">
          <el-option
            v-for="item in doctorlist"
            :key="item.id"
            :label="item.doctorName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="diabeteType"
          clearable
          placeholder="请选择糖尿病类型"
        >
          <el-option
            v-for="item in diabetelist"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="姓名" v-model="patientName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="住院号" v-model="hospitalNum"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input placeholder="床号" v-model="bedNum"></el-input>
      </el-form-item>
      <el-form-item class="admissionTime">
        <el-date-picker
          v-model="admissionTime"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item style="margin-right: 0">
        <el-button type="primary" @click="Inquiry()">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="top_2f">
      <el-radio-group
        @change="patientStatus"
        v-model="radio"
        class="top_2f_left"
      >
        <el-radio-button
          class="left_item"
          v-for="item of categorylist"
          :key="item.id"
          :label="item.id"
        >
          <span>{{ item.num }}</span>
          <span>{{ item.title }}</span>
        </el-radio-button>
      </el-radio-group>
      <div>
        <el-switch
          v-model="switchVal"
          active-color="#13ce66"
          inactive-color="#999999"
          class="top_2f_right"
          active-value="1"
          inactive-value="2"
          @change="switchTab"
        >
        </el-switch>
        <span v-show="switchVal">卡片</span>
        <span v-show="!switchVal">列表</span>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "./bus.js"
export default {
  data() {
    return {
      departmentlist: [],
      department: "",
      doctorlist: [],
      doctor: "",
      diabetelist: [
        {
          label: "无",
          value: "0",
        },
        {
          label: "1型",
          value: "1",
        },
        {
          label: "2型",
          value: "2",
        },
        {
          label: "妊娠",
          value: "3",
        },
        {
          label: "其他",
          value: "4",
        },
      ],
      diabeteType: "",
      patientName: "",
      hospitalNum: "",
      bedNum: "",
      admissionTime: "",
      // 选择查看类型
      queryType: [
        {
          label: "1",
          val: "222",
        },
        {
          label: "2",
          val: "222",
        },
        {
          label: "3",
          val: "222",
        },
        {
          label: "4",
          val: "222",
        },
      ],
      radio: "1",
      radio2: "",
      value4: "",
      switchVal: "1", //卡片列表切换按钮绑定数值
    };
  },
  props: {
    categorylist: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    //  刷新保存对应类型患者
    sessionStorage.getItem("patientType")
      ? (this.radio = sessionStorage.getItem("patientType"))
      : (this.radio = 0);
    // 刷新保存渲染格式为表格卡片
    let switchVal = sessionStorage.getItem("switchVal");
    switchVal ? (this.switchVal = switchVal) : (this.switchVal = "1");
    this.switchTab();
    // 查询所有科室
    this.getDepartment();
  },
  methods: {
    // 床位显示类型
    switchTab() {
      sessionStorage.setItem("switchVal", this.switchVal);
      this.$emit("showSwitch", this.switchVal);
    },
    // 获取对应患者类型的床位数据
    patientStatus() {
      // 保存到缓存,防止刷新丢失
      sessionStorage.setItem("patientType", this.radio);
      // this.$emit("patientType", this.radio);
      this.Inquiry();
    },
    Inquiry(page) {
      console.log(this.doctor)
      let routeid = sessionStorage.getItem("routeID");
      let routeID = routeid ? JSON.parse(routeid)["/index"] : "";
      let data = {
        bedNum: this.bedNum, //床位号
        currentClickPerId: routeID, //侧边栏ID
        departmentId: this.department, //科室
        doctorId: this.doctor,
        diabetesType: this.diabeteType, //糖尿病类型
        hospitalNum: this.hospitalNum, //住院号
        patientName: this.patientName, //患者名称
        startTime: this.admissionTime[0], //起始时间
        endTime: this.admissionTime[1], //结束时间
        // page: page ? page : 1
      };
      this.$parent.getIndexUserInfo(data);
    },
    // 查询所有科室
    getDepartment() {
      let routeid = sessionStorage.getItem("routeID");
      let routeID = routeid ? JSON.parse(routeid)["/index"] : "";
      let data = {
        perId: routeID,
      };
      this.$api.getDepartment(data).then((res) => {
        this.departmentlist = res.data.data;
      });
    },
    // 下拉框选取科室
    depchanges(id) {
      this.doctorlist = [];
      this.doctor = "";
      if (id) {
        let doctorlist = this.departmentlist.filter((item) => {
          return item.id == id;
        });
        let DoctorList = doctorlist[0].bloodSugarDoctorList;
        this.doctorlist = DoctorList[0].id ? DoctorList : [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  padding: 25px 20px;
  background-color: #fff;
  .search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    .el-form-item {
      margin-right: 0.3rem;
      & >>> .el-input__inner{
        max-width: 180px;
      }
    }
    .el-date-editor--daterange.el-input__inner {
      max-width: 180px;
    }
  }
  .top_2f {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .top_2f_left {
      .left_item {
        width: 107px;
        height: 55px;
        border-radius: 7px;
        margin: 0;
        margin-right: 33px;
        & >>> .el-radio-button__inner {
          padding: 0;
          width: 107px;
          height: 55px;
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: space-around;
          border: 1px solid rgb(64, 158, 255);
          border-radius: 7px;
        }
      }
    }
    .top_2f_right {
      // height: 100px;
    }
  }
}
</style>